<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
{% extends "base.html" %}
{% block title %} 用户信息修改 {% endblock title %}
{% block content %}
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>忘记密码</title>
        <link type="text/css" rel="stylesheet" href="{% static 'css/users/password.css' %}"/>
        <script type="text/javascript" src="{% static 'common/jquery/jquery-1.11.1.min.js' %}"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var height = $(document).height();
                $('.main').css('height', height);
            })


        </script>
    </head>

    <body>
    <div class="main">
        <div class="main0">
            <div class="formBox">
                <h3>登录密码重置</h3>
                <ul>
                    <li class="mainCol firLi">身份验证</li>
                    <li class="mainCol">登录密码重置</li>
                    <li class="lastLi">重置完成</li>
                </ul>
                <img src="{% static 'img/users/line2.png' %}"/>
                <form action="." enctype="multipart/form-data" method="post">
                    {% csrf_token %}
                    <div class="itembox itembox_2">
                        <label>邮箱验证码 &nbsp;:</label>
                        <input type="text" name="code" placeholder="请输入邮箱验证码" class="yzm"></span>
                        <button id="btn" class="yzmbox2" onclick="sendVerificationCode('{{ emails }}')">获取验证码</button>
                    </div>
                    <div class="itembox itembox_2">
                        <label>登录密码&nbsp;:</label>
                        <input type="password" name="newpwd1" placeholder="请输入新登录密码"></span>
                    </div>
                    <div class="itembox itembox_2">
                        <label>确认密码&nbsp;:</label>
                        <input type="password" name="newpwd2" placeholder="请再次输入新密码"></span>
                    </div>
                    <div class="btnBox">
                        <button type="submit">确认修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        <!--验证码倒计时按钮绑定事件-->
        var countdown = 60; //总倒计时时间
        var timer; //计时器
        function startCountdown() {
            var btn = document.getElementById("btn");
            btn.disabled = true; // 按钮不可用
            timer = setInterval(function () {
                countdown--; // 倒计时减1秒
                if (countdown <= 0) { // 倒计时结束
                    clearInterval(timer); // 清除计时器
                    btn.disabled = false; // 恢复按钮状态
                    btn.textContent = "获取邮箱验证码"; // 恢复默认按钮文字
                    countdown = 60; // 重置倒计时时间
                } else {
                    btn.textContent = countdown + "s后可重新发送"; // 更新倒计时显示
                }
            }, 1000); // 每隔1秒更新一次倒计时
        }

        function sendVerificationCode(emails) {
            // 获取输入的手机号
            const formData = new FormData()
            formData.append('email', emails)

            fetch("/users/send-code/" + emails + '/', {
                method: "POST",
                body: formData,
            })
                .then(response => {
                    if (response.success) {
                        console.log("验证码发送成功！");
                        // 启动倒计时计时器
                        startCountdown();
                    } else {
                        console.log("验证码发送失败，请重试！");
                    }
                });
        }

        ;
        document.getElementById("btn").addEventListener("click", startCountdown)
    </script>
    </body>
    </html>
{% endblock content %}